<script setup>
  import { getQuestionListApi } from '@/api/question.js'
  import { reactive, ref } from 'vue'
  import { DIFFICULTY_MAP } from '@/constants'
  import QuestionSelector from './components/QuestionSelector.vue'
  import QuestionDrawer from './components/QuestionDrawer.vue'
  import { deleteQuestionApi } from '../../api/question'
  import { ElMessageBox } from 'element-plus'

  // 表单
  const questionForm = reactive({
    pageNo: 1,
    pageSize: 3,
    difficulty: '',
    title: ''
  })
  // 列表
  const questionList = ref([])
  // 记录总数
  const total = ref(null)
  getQuestionList()
  async function getQuestionList() {
    const resp = await getQuestionListApi(questionForm)
    questionList.value = resp.list
    total.value = resp.totals
  }
  // 搜索
  const onSearch = () => {
    if (questionForm.difficulty || questionForm.title) {
      getQuestionList()
    }
  }

  // 重置
  const onReset = () => {
    if (questionForm.difficulty || questionForm.title) {
      questionForm.difficulty = questionForm.title = ''
      getQuestionList()
    }
  }
  // 新增/编辑表单页面
  const questionEditRef = ref()
  // 新增
  const onAddQuestion = () => {
    questionEditRef.value.open()
  }
  // 新增/编辑成功需要重新获取题库
  function onSuccess(service) {
    getQuestionList()
  }
  // 编辑
  async function onEdit(questionId) {
    questionEditRef.value.open(questionId)
  }
  // 删除
  async function onDelete(questionId) {
    await ElMessageBox.confirm(
      '确定删除这条宝贵的数据?',
      '友情提示',
      {
        confirmButtonText: '狠心删除',
        cancelButtonText: '手抖了',
        type: 'warning'
      }
    )
    await deleteQuestionApi(questionId)
    getQuestionList()
  }
</script>
<script>
  export default {
    name: 'QuestionPage'
  }
</script>
<template>
  <section class="app-container">
    <!-- 表单 -->
    <el-form label-position="top" :inline="true">
      <el-form-item label="题目难度">
        <QuestionSelector
          v-model="questionForm.difficulty"
          placeholder="请选择题目难度"
          style="width: 200px"
        />
      </el-form-item>
      <el-form-item label="题目标题">
        <el-input
          placeholder="请输入题目标题"
          v-model="questionForm.title"
        />
      </el-form-item>
      <el-form-item label="操作" class="nolabel">
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <div class="table-box">
      <el-button
        class="btn-add"
        type="primary"
        plain
        @click="onAddQuestion()"
      >
        新增
      </el-button>
      <el-table
        :data="questionList"
        :cell-style="{
          textAlign: 'center'
        }"
        :header-cell-style="{
          textAlign: 'center'
        }"
      >
        <el-table-column
          label="题目id"
          prop="questionId"
          width="180"
        />
        <el-table-column label="标题" prop="title" />
        <el-table-column label="难度">
          <template #default="{ row }">
            <div v-if="row.difficulty === 1" style="color: #3ec8ff">
              {{ DIFFICULTY_MAP[row.difficulty] }}
            </div>
            <div v-if="row.difficulty === 2" style="color: #fe7909">
              {{ DIFFICULTY_MAP[row.difficulty] }}
            </div>
            <div v-if="row.difficulty === 3" style="color: #fd4c40">
              {{ DIFFICULTY_MAP[row.difficulty] }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="创建人" prop="createName" />
        <el-table-column label="创建时间" prop="createTime" />
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="text" @click="onEdit(row.questionId)">
              编辑
            </el-button>
            <el-button
              type="text"
              class="delete-btn"
              @click="onDelete(row.questionId)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="questionForm.pageNo"
        v-model:page-size="questionForm.pageSize"
        :total="total"
        :page-sizes="[2, 3, 5]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="getQuestionList"
        @current-change="getQuestionList"
      />
    </div>
    <!-- 新增或编辑 -->
    <!-- ref获取子组件实例,实例名称为questionEditRef -->
    <QuestionDrawer ref="questionEditRef" @success="onSuccess" />
  </section>
</template>
<style lang="scss" scoped></style>
